<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>员工列表页面</title>
    <%-- 引入jquery--%>
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.4.2.min.js"></script>
    <%--引入bootStrap文件--%>
    <link href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>

<%--栅格系统格式搭建--%>
<%--搭建显示页面--%>
<div class="container">
    <%-- 标题 --%>
    <div class="row">
        <div class="col-md-12">
            <h1> SSM-CRUD</h1>
        </div>
    </div>
    <%-- 按钮 --%>
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button type="button" class="btn btn-primary">新增</button>
            <button type="button" class="btn btn-danger">删除</button>
        </div>
    </div>
    <%-- 表格 --%>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="emps_table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>empName</th>
                        <th>gender</th>
                        <th>email</th>
                        <th>deptName</th>
                        <th>操作</th>
                    </tr>
                </thead>
               <tbody>

               </tbody>
            </table>
        </div>
    </div>
    <%-- 页码条 --%>
    <div class="row">
        <%--分页文字信息--%>
        <div class="col-md-6" id="page_info_area">

        </div>
        <%--分页条信息--%>
        <div class="col-md-6" id="page_nav_area">

        </div>
    </div>
</div>

<script type="text/javascript">
    function fun(){

    }
//页面加载完成以后，直接去发送一个ajax请求，拿到分页数据
    $(function(){
       //调用查询的方法
        to_page(1);
    });

    //抽取查询的方法
    function to_page(pageN){
        $.ajax({
            url:"${pageContext.request.contextPath}/emps",
            data:"pageN="+pageN,
            type:"GET",
            success:function(data){
                //console.log(data);
                //显示员工信息
                build_emps_table(data);
                //显示分页信息
                build_page_info(data);
                //解析并显示分页条
                build_page_nav(data);
            }
        });
    }


    //显示员工信息
    function  build_emps_table(data){
        //清空table表格
        $("#emps_table tbody").empty();
        var emps=data.extend.pageInfo.list;
        $.each(emps,function(index,item){
          // alert(item.empName);
            var empIdTd=$("<td></td>").append(item.empId);
            var empNameTd=$("<td></td>").append(item.empName);
            var genderTd=$("<td></td>").append(item.gender=='M'?"男":"女");
            var emailTd=$("<td></td>").append(item.email);
            var deptNameTd=$("<td></td>").append(item.department.deptName);
            //编辑按钮
            var editBtn=$("<button></button>").addClass("btn btn-primary btn-sm")
                .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                .append("编辑");
            //删除按钮
            var delBtn=$("<button></button>").addClass("btn btn-danger btn-sm")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
                .append("删除");
            var btnId=$("<td></td>").append(editBtn).append(" ").append(delBtn);
          $("<tr></tr>").append(empIdTd).
              append(empNameTd)
              .append(genderTd)
              .append(emailTd)
              .append(deptNameTd)
              /*.append(editBtn)
              .append(delBtn)*/
              .append(btnId)
              .appendTo("#emps_table tbody");
        });
    }

    //显示分页信息
    function build_page_info(data){
        //清空分页信息
        $("#page_info_area").empty();
        $("#page_info_area").append("当前第"+data.extend.pageInfo.pageNum+"页，总共"+data.extend.pageInfo.pages+"页,"+data.extend.pageInfo.total+"条记录");
    }
    //显示分页条
    function build_page_nav(data){
        //清空分页条信息
        $("#page_nav_area").empty();
        var ul=$("<ul></ul>").addClass("pagination");

        //构建元素
        //首页
        var firstPageLi=$("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
        //前一页
        var prePageLi=$("<li></li>").append($("<a></a>").append("&laquo;"));
        //如果没有前一页则不能点击
        if(data.extend.pageInfo.hasPreviousPage==false){
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        }else{
            //为元素绑定点击事件
            firstPageLi.click(function(){
                to_page(1);
            });
            prePageLi.click(function(){
                to_page(data.extend.pageInfo.pageNum-1);
            });
        }


        //构建元素
        //后一页
        var nextPageLi=$("<li></li>").append($("<a></a>").append("&raquo;"));
        //尾页
        var lastPageLi=$("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
        //如果没有下一页，则不能点击了
        if(data.extend.pageInfo.hasNextPage==false){
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }else{
            //为元素绑定点击事件
            nextPageLi.click(function(){
                to_page(data.extend.pageInfo.pageNum+1);
            });
            lastPageLi.click(function(){
                to_page(data.extend.pageInfo.pages);
            });
        }


        //添加首页和前一页的提示
        ul.append(firstPageLi).append(prePageLi);

        $.each(data.extend.pageInfo.navigatepageNums,function(index,item){
            var numLi=$("<li></li>").append($("<a></a>").append(item));
            //当前页面高亮
            if(data.extend.pageInfo.pageNum==item){
                numLi.addClass("active");
            }
            numLi.click(function(){
                to_page(item);
            });
            ul.append(numLi);
        });
        //添加下一页和未页的提示
        ul.append(nextPageLi).append(lastPageLi);

        //把ul加入到nav
        var navEle=$("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }

</script>

</body>
</html>
